<template>
    <div class="PersonalCenter">

        <div class="text">
            <el-form ref="form" :model="AdminForm" label-width="80px">

                <el-form-item style="text-align: center;">
                    <el-upload class="avatar-uploader" action="http://localhost:8086/common/upload" :show-file-list="false"
                        multiple="multiple" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                        :disabled="disabled">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>


                <el-form-item label="用户名">
                    <el-input v-model="AdminForm.name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="AdminForm.pass" :disabled=disabled></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-input v-model="AdminForm.role" :disabled=true></el-input>
                </el-form-item>
                <el-form-item size="large">
                    <el-button type="primary" @click="noUpdate"
                        style="margin-left: 60px; margin-top: 10px;">取消修改</el-button>
                    <el-button type="primary" @click="update" style="margin-left: 150px;" v-model="text">{{ text
                    }}</el-button>
                </el-form-item>
            </el-form>
        </div>


    </div>
</template>

<script scoped>
export default {
    name: 'PersonalCenter',
    data() {
        return {
            //为true是输入框不能输入
            disabled: true,
            text: "立即修改",
            imageUrl: "",
            //不支持多选
            multiple: false,
            AdminForm: {
                name: '',
                pass: '',
                role: '',
                photo: '',
            }
        }
    },
    methods: {
        //修改
        update() {

            if (this.text === "立即修改") {
                //为false是可以修改
                this.disabled = false;
                this.text = "保存";
            } else if (this.text === "保存") {
                this.$alert('请再次确认密码', '温馨提示', {
                    confirmButtonText: '确定',
                });
                this.text = "确认修改"
            } else if (this.text === "确认修改") {
                console.log(this.AdminForm);
                this.axios.post("/admin/update", this.AdminForm)
                    .then(res => {
                        if (res.data === "success") {
                            this.$message({
                                message: '恭喜你，修改成功',
                                type: 'success'
                            });
                        }
                        this.getAdminInfo();
                        this.text = "立即修改";
                        this.disabled = true;
                    })
            }


        },

        // 取消修改
        noUpdate() {
            this.disabled = true;
            this.text = "立即修改";
        },

        getAdminInfo() {
            this.axios.get("/admin/getadmin")
                .then(res => {
                    console.log(res.data)
                    this.AdminForm = res.data;
                    let name = res.data.photo;
                    console.log(name);
                    this.imageUrl = `http://localhost:8086/common/download?name=${name}`;
                })
        },
        handleAvatarSuccess(response, file, fileList) {
            this.imageUrl = `http://localhost:8086/common/download?name=${response}`
            this.AdminForm.photo = response
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        },

    },
    mounted() {
        this.getAdminInfo();
    }
}

</script>


<style scoped >
.PersonalCenter {
    background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text {

    height: 80%;
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;

    background-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 0.8px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    color: rgb(101, 25, 25);

}

/* 上传 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.avatar {
    width: 130px;
    height: 130px;
    display: block;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.avatar-uploader {
    text-align: center;
}
</style>